<template>
  <!-- <div class="HomePage" v-loading="State.Loading" element-loading-background="rgba(0, 0, 0, 0.2)"> -->
  <div class="HomePage" element-loading-background="rgba(0, 0, 0, 0.2)">
    <ProductActivationList></ProductActivationList>
    <UserOption></UserOption>
    <HomeTaskPanel @LoadingPanel="LoadingPanel"></HomeTaskPanel>
    <HomeErrorPoint></HomeErrorPoint>
    <HomeTaskEvaluation></HomeTaskEvaluation>
    <HomeScoredistribution></HomeScoredistribution>
    <HomeTaskdynamic></HomeTaskdynamic>
    <div :class="isSearch ? 'SearchClick' : 'Search'">
      <img class="searchBtn" src="../../public/img/搜索.png" alt="">
      <form action="">
        <input class="searchIpt" placeholder="搜索" type="text" @focus="IptFocus" @blur="IptBlur" v-model="searchVal"
          @input="IptChange" @keydown.enter="handleEnter">
      </form>
      <img class="searchClose" v-show="searchVal != ''" src="../../public/img/关闭.png" @click="cancelSearch" alt="">
    </div>
  </div>

</template>

<script>
import { defineComponent, reactive, ref, toRef, toRefs, onMounted, nextTick } from "vue";
import { postData } from "@/assets/js/pubilcs.js";
import HomeTaskPanel from "@/components/allcommons/HomeTaskPanel.vue";
import HomeErrorPoint from "@/components/allcommons/HomeErrorPoint.vue";
import HomeTaskEvaluation from "@/components/allcommons/HomeTaskEvaluation.vue";
import HomeScoredistribution from "@/components/allcommons/HomeScoredistribution.vue";
import HomeTaskdynamic from "@/components/allcommons/HomeTaskdynamic.vue";
import bus from '@/bus.js'
import HomeContent from "@/components/HomeContent";
export default defineComponent({
  name: "HomePage",
  components: {
    HomeTaskPanel,
    HomeErrorPoint,
    HomeTaskEvaluation,
    HomeScoredistribution,
    HomeTaskdynamic,
  },
  setup() {
    let State = reactive({
      Loading: true
    })
    let isSearch = ref(false)
    let pratuctArr = []
    let searchVal = ref('')
    function LoadingPanel(data) {
      if (data === 'false') {
        State.Loading = false
      }
    }
    //获取所有产品
    function GetAllProduct() {
      if (sessionStorage.getItem("ProductInventoryArr")) {
        return
      }
      else {
        let schoolId = sessionStorage.getItem("schoolId")
        let userid = sessionStorage.getItem("userid")
        postData(
          "/api/Product/GetAllBySchoolId",
          JSON.stringify({ SchoolId: schoolId, UserId: userid }),
          sessionStorage.getItem("token")
        )
          .then(function (res) {
            console.log(res)
            //临时储存所有产品,第二次用sessionStorage获取
            sessionStorage.setItem("ProductInventoryArr", JSON.stringify(res.result.result))
          })
          .catch((error) => {

          });
      }
    }
    // 搜索聚焦
    function IptFocus() {
      HomeContent.Default.searchVal.value = searchVal.value
      isSearch.value = true
      pratuctArr.value = JSON.parse(sessionStorage.getItem("shouyeDate"))
    }
    // 搜索失焦
    function IptBlur() {
      HomeContent.Default.searchVal.value = searchVal.value
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
    }
    // 搜索改变
    async function IptChange() {
      HomeContent.Default.searchVal.value = searchVal.value
      HomeContent.Default.searchList.value = []
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
      pratuctArr.value.forEach(element => {
        if (element.shortName.includes(HomeContent.Default.searchVal.value) || element.number.slice(-3).includes(HomeContent.Default.searchVal.value)) {
          HomeContent.Default.searchList.value.push(element)
        }
      });
    }
    // 取消搜索
    function cancelSearch() {
      searchVal.value = ''
      HomeContent.Default.searchVal.value = ''
      console.log('清空时的点击产品', sessionStorage.getItem('productIdex'));
    }
    // enter事件
    function handleEnter(event) {
      event.preventDefault(); // 阻止默认行为
      console.log('搜索的enter键盘', event);
    }
    onMounted(() => {
      if (HomeContent.Default.searchVal.value != '') {
        searchVal.value = HomeContent.Default.searchVal.value
        IptFocus()
        IptChange()
      } else {
        HomeContent.Default.searchVal.value = searchVal.value
      }
      // HomeContent.Default.searchVal.value = searchVal.value
      GetAllProduct()
    });
    return {
      State,
      LoadingPanel,
      IptFocus,
      IptBlur,
      IptChange,
      isSearch,
      pratuctArr,
      searchVal,
      cancelSearch,
      handleEnter,
    };
  },
});
</script>
<style lang="less">
.HomePage {
  position: relative;
  width: 100%;
  height: 100%;
}

.Search {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ABABAB;
  display: -webkit-inline-box;
  z-index: 1000;
}

.SearchClick {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #3389EC;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #080808;
  display: -webkit-inline-box;
  z-index: 1000;
}

.searchIpt {
  width: 640px;
  height: 40px;
  border: none;
}

.searchIpt::placeholder {
  color: #DCDFE6;
}

.searchIpt:focus-visible {
  outline: none;
  color: #080808;
}

.searchBtn {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.searchClose {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}
</style>
